<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单验证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 440px;
            margin: 30px auto;
        }

        p {
            margin-top: 20px;
            margin-left: 38px;
        }

        input {
            margin-right: 20px;
        }

        .title {
            text-align: center;
        }

        .submit {
            text-align: center;
        }

        #submit {
            background-color: rgb(216, 53, 53);
            width: 200px;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="title">
        <h1>正则表达式表单验证</h1>
    </div>
    <div class="content">
        <form action="" onsubmit="return false">
            <p>
                <label for="name">姓名：</label>
                <input type="text" id="name" onblur="nameCheck()">
                <span class="name">2-6位中文组成</span>
            </p>
            <p>
                <label for="sex">性别：</label>
                <input type="text" id="sex" onblur="sexCheck()">
                <span class="sex">请输入男或女</span>
            </p>
            <p>
                <label for="tel">电话：</label>
                <input type="text" id="tel" onblur="telCheck()">
                <span class="tel">11位数字组成</span>
            </p>
            <p>
                <label for="email">邮箱：</label>
                <input type="email" id="email" onblur="emailCheck()">
                <span class="email">ex:123456@qq.com</span>
            </p>
            <p>
                <label for="pwd">密码：</label>
                <input type="password" id="pwd" onblur="pwdCheck()">
                <span class="pwd">请输入6-12位密码</span>
            </p>
            <p>
                <label for="pwd1">密码确认：</label>
                <input type="password" id="pwd1" onblur="pwdSure()">
                <span class="pwd1">请再次输入密码</span>
            </p>
            <p class="submit">
                <input type="button" onclick="sub()" id="submit" value="提交">
            </p>
        </form>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    function sub() {
        //如果全部输入正确返回成功  输入错误则输出提示
        if(nameCheck() && sexCheck() && telCheck() && emailCheck() && pwdCheck() && pwdSure()){
            alert('提交成功');
        }else{
            alert('你的输入有误，请按要求输入后再提交');
        }
    }
    //验证姓名字段
    function nameCheck() {
        let reg = /^[\u4e00-\u9fa5]{2,6}$/;
        let name = $("#name").val();
        if (!reg.test(name) || name=='') {
            $(".name").html("<span class='red'>请输入2~6位中文</span>");
            return false;
        }else{
            $(".name").text('√');
            return true;
        }
    }
    //验证性别字段
    function sexCheck(str) {
        let reg = /^男$|^女$/;
        let sex = $("#sex").val();
        if(!reg.test(sex) || sex==''){
            $(".sex").html("<span class='red'>从男或女中选择输入</span>")
            return false;
        }else{
            $(".sex").text('√');
            return true;
        }
    }
    //验证电话
    function telCheck(str) {
        let reg = /^\d{11}$/;
        let tel = $("#tel").val();
        if(!reg.test(tel) || tel==''){
            $(".tel").html("<span class='red'>请输入11位电话号码</span>")
            return false;
        }else{
            $(".tel").text('√');
            return true;
        }
    }
    //验证邮箱字段
    function emailCheck(str) {
        let reg = /^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/;
        let email = $("#email").val();
        if(!reg.test(email) || email==''){
            $(".email").html("<span class='red'>请输入正确的邮箱</span>")
            return false;
        }else{
            $(".email").text('√');
            return true;
        }
    }
    //验证密码字段
    function pwdCheck(str) {
        let reg = /^[\s\S]{6,12}/;
        let pwd = $("#pwd").val();
        if(!reg.test(pwd) || pwd==''){
            $(".pwd").html("<span class='red'>请输入6-12位密码</span>")
            return false;
        }else{
            $(".pwd").text('√');
            return true;
        }
    }
    //确认密码
    function pwdSure() {
        if ($("#pwd").val() === $("#pwd1").val()) {
            return true;
        } else {
            $(".pwd1").html("<span class='red'>两次密码输入不一致</span>")
            return false;
        }
    }
</script>
</body>

</html>
